<template>
  <svg aria-hidden="true" :width="size" :height="size">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>
<script setup lang="ts" name="SvgIcon">
const props = defineProps({
  name: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "black"
  },
  size: {
    type: String,
    default: "1em"
  }
});
const symbolId = computed(() => `#icon-${props.name}`);
</script>
<style scoped>
svg {
  margin: 0 4px;
}
svg:focus {
  outline: none;
}
</style>
